<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        box {
            width: 800px;
            border: 1px salmon;
            background-color: #c81623;

        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;

        }

        .nav {
            margin: 0px;
        }

        .nav>li {

            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;

        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;

            top: 41px;
            left: 0;
            width: 100%;

        }

        .nav ul li {
            border: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="nav">
            <li>
                <a href="#">第一栏</a>
                <ul>
                    <li>
                        <a href="">第一个</a>
                    </li>
                    <li>
                        <a href="">第二个</a>
                    </li>

                </ul>
            </li>
            <li>
                <a href="#">第二栏</a>
                <ul>
                    <li>
                        <a href="">111</a>
                    </li>
                    <li>
                        <a href="">222</a>
                    </li>
                    <li>
                        <a href="">333</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">第三栏</a>
                <ul>
                    <li>
                        <a href="">qwerr</a>
                    </li>
                    <li>
                        <a href="">asdsf</a>
                    </li>
                    <li>
                        <a href="">asdsadf</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">第三栏</a>
                <ul>
                    <li>
                        <a href="">呱呱</a>
                    </li>
                    <li>
                        <a href="">好耶</a>
                    </li>
                    <li>
                        <a href="">叽叽叽</a>
                    </li>
                    <li>
                        <a href="">喵喵</a>
                    </li>
                    <li>
                        <a href="">。。</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        var nav = document.querySelector('.nav');/* 是class记得加点加点加点加点…… */
        var lis = nav.children;/* 获取nav里面的四个li */
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';/* 让lis里面的ul显示，即菜单隐藏的部分，第一个是a，第二个才是ul，所以是[1] */
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }


    </script>
</body>

</html>